<template>
  <div class="home-container">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item><img src="../assets/image/banner1.jpg" alt="" /></van-swipe-item>
      <van-swipe-item><img src="../assets/image/banner2.jpg" alt="" /></van-swipe-item>
      <van-swipe-item><img src="../assets/image/banner3.jpg" alt="" /></van-swipe-item>
    </van-swipe>
    <!-- 提示 -->
    <div class="home-tip">
      <van-swipe :autoplay="3000" vertical :touchable="false" :show-indicators="false">
        <van-swipe-item
          ><van-icon name="records" color="#aacca7" />
          <span>平台线上线下正常接单，各新老用户正常下单</span></van-swipe-item
        >
        <van-swipe-item
          ><van-icon name="records" color="#aacca7" />
          <span>近期订单量较多，未能及时到达望您理解</span></van-swipe-item
        >
        <van-swipe-item
          ><van-icon name="records" color="#aacca7" />
          <span>点滴施乐，阳光行善</span></van-swipe-item
        >
      </van-swipe>
    </div>
    <!-- 选择类别 -->
    <div class="home-content">
      <div class="head">
        <van-icon name="label-o" color="#f5f945" />
        <span>请选择出售类别（上门回收）</span>
      </div>
      <div class="body">
        <ul>
          <li @click="active = 0">
            <a>
              <div class="left">
                <p class="cycle-title">纸皮</p>
                <p class="cycle-detail">森林是氧气的制造工厂</p>
              </div>
              <div class="right">
                <img src="../assets/image/cycle_title1.jpg" alt="" />
              </div>
            </a>
          </li>
          <li @click="active = 1">
            <a>
              <div class="left">
                <p class="cycle-title">塑料</p>
                <p class="cycle-detail">文明始于心，减塑践于行</p>
              </div>
              <div class="right">
                <img src="../assets/image/cycle_title2.jpg" alt="" />
              </div>
            </a>
          </li>
          <li @click="active = 2">
            <a>
              <div class="left">
                <p class="cycle-title">金属</p>
                <p class="cycle-detail">变废为宝，物尽其用</p>
              </div>
              <div class="right">
                <img src="../assets/image/cycle_title3.jpg" alt="" />
              </div>
            </a>
          </li>
          <li @click="active = 3">
            <a>
              <div class="left">
                <p class="cycle-title">家电</p>
                <p class="cycle-detail">回收的不是废品，而是资源</p>
              </div>
              <div class="right">
                <img src="../assets/image/cycle_title4.jpg" alt="" />
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="home-btn">
      <van-button type="success" @click="onCallRecover">呼叫上门回收</van-button>
    </div>

    <!-- 趋势图 -->
    <div class="echarts-box">
      <van-swipe class="my-swipe" indicator-color="#55c24d" ref="swipeRef">
        <van-swipe-item>
          <div id="myEcharts1"></div>
        </van-swipe-item>
        <van-swipe-item>
          <div id="myEcharts2"></div>
        </van-swipe-item>
        <van-swipe-item>
          <div id="myEcharts3"></div>
        </van-swipe-item>
        <van-swipe-item>
          <div id="myEcharts4"></div>
        </van-swipe-item>
      </van-swipe>
    </div>

    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from '../components/TabbarView.vue'
import { showToast } from 'vant'
import { getHistoryPrice } from '../api/historyPrice.js'
import { getUser } from '../api/user.js'
export default {
  data() {
    return {
      // 被激活的图表
      active: 0,
      // 图表
      fzlist: [],
      sllist: [],
      jslist: [],
      jdlist: [],
      x: [],
      y: []
    }
  },
  components: {
    Tabbar
  },
  created() {
    this.getUser()
  },
  async mounted() {
    // 废纸历史价格
    const { data: resFz } = await getHistoryPrice(3)
    this.fzlist = resFz.data
    this.fzlist = this.formatData(this.fzlist)

    // 塑料历史价格
    const { data: resSl } = await getHistoryPrice(2)
    this.sllist = resSl.data
    this.sllist = this.formatData(this.sllist)

    // 金属历史价格
    const { data: resJs } = await getHistoryPrice(1)
    this.jslist = resJs.data
    this.jslist = this.formatData(this.jslist)

    // 塑料历史价格
    const { data: resJd } = await getHistoryPrice(4)
    this.jdlist = resJd.data
    this.jdlist = this.formatData(this.jdlist)

    // 图表1
    const myChart1 = this.$echarts.init(document.getElementById('myEcharts1'))
    // 绘制图表
    myChart1.setOption({
      title: { text: '纸皮价格趋势', textStyle: { fontSize: 16, fontWeight: 'normal' } },
      xAxis: {
        type: 'category',
        data: this.fzlist[0] // 横坐标
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: this.fzlist[1], // 纵坐标
          type: 'line',
          label: {
            show: true, // true表示数值默认时就显示。若为false，而 series.emphasis.label.show 为 true，则表示只有在鼠标移动到该数据时，才显示数值
            position: 'top',
            textStyle: {
              fontSize: 10
            }
          }
        }
      ]
    })

    // 图表2
    const myChart2 = this.$echarts.init(document.getElementById('myEcharts2'))
    myChart2.setOption({
      title: { text: '塑料价格趋势', textStyle: { fontSize: 16, fontWeight: 'normal' } },
      xAxis: {
        type: 'category',
        data: this.sllist[0]
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: this.sllist[1],
          type: 'line',
          label: {
            show: true,
            position: 'top',
            textStyle: {
              fontSize: 10
            }
          }
        }
      ]
    })

    // 图表3
    const myChart3 = this.$echarts.init(document.getElementById('myEcharts3'))
    myChart3.setOption({
      title: { text: '金属价格趋势', textStyle: { fontSize: 16, fontWeight: 'normal' } },
      xAxis: {
        type: 'category',
        data: this.jslist[0]
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: this.jslist[1],
          type: 'line',
          label: {
            show: true,
            position: 'top',
            textStyle: {
              fontSize: 10
            }
          }
        }
      ]
    })

    // 图表4
    const myChart4 = this.$echarts.init(document.getElementById('myEcharts4'))
    myChart4.setOption({
      title: { text: '家电价格趋势', textStyle: { fontSize: 16, fontWeight: 'normal' } },
      xAxis: {
        type: 'category',
        data: this.jdlist[0]
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: this.jdlist[1],
          type: 'line',
          label: {
            show: true,
            position: 'top',
            textStyle: {
              fontSize: 10
            }
          }
        }
      ]
    })
  },
  methods: {
    // 呼叫上门回收
    onCallRecover() {
      this.$router.push('/recover')
    },
    // 规范历史数据
    formatData(arr) {
      this.x = []
      this.y = []
      for (let i = 0; i < 7; i++) {
        this.x.unshift(arr.time[i].substr(5, 5))
      }
      this.y = arr.price.slice(0, 7).reverse()
      return [this.x, this.y]
    },
    // 获取用户信息
    async getUser() {
      const { data: res } = await getUser()
      if (res.code === 1) {
        this.user = res.data
        window.sessionStorage.setItem('userInfo', JSON.stringify(res.data))
      } else {
        showToast('获取数据失败！')
      }
    }
  },
  watch: {
    // 监听选中哪个类别
    active() {
      return this.$refs.swipeRef.swipeTo(this.active, 1000, false)
    }
  }
}
</script>

<style lang="less" scoped>
.home-container {
  padding-bottom: 50px;
  overflow: hidden;
  // 轮播图
  .my-swipe {
    width: 100%;
    height: 150px;
    line-height: 150px;

    .van-swipe-item {
      background-color: #39a9ed;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  // 提示
  .home-tip {
    width: 100%;
    height: 30px;
    line-height: 35px;
    font-size: 11px;
    color: red;
    padding-left: 8px;

    .van-swipe {
      height: 100%;
    }

    span {
      margin-left: 10px;
    }
  }

  // 分类
  .home-content {
    .head {
      width: 100%;
      height: 35px;
      line-height: 35px;
      font-size: 14px;
      color: #fff;
      padding-left: 8px;
      background-color: #55c24d;

      span {
        margin-left: 10px;
      }
    }

    .body {
      width: 100%;

      ul {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        li {
          width: 47%;
          height: 90px;
          background-color: #fff;
          margin: 8px 0;
          border-radius: 10px;

          a {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 90px;
            color: #333;

            .left {
              display: flex;
              flex-direction: column;
              justify-content: center;
              width: 50%;
              height: 100%;
              z-index: 1;

              p {
                width: 100%;
                height: 30px;
                margin: 0;
                font-family: serif;
                padding-left: 5px;
              }

              .cycle-title {
                font-size: 16px;
                font-weight: 500;
              }
              .cycle-detail {
                font-size: 13px;
                color: #666;
              }
            }

            .right {
              display: flex;
              align-items: center;
              width: 50%;
              height: 100%;

              img {
                width: 90%;
                height: 80%;
              }
            }
          }
        }
      }
    }
  }

  .home-btn {
    display: flex;
    justify-content: center;
    margin-top: 15px;

    .van-button {
      width: 80%;
      color: #fff;
      font-weight: 700;
      border-radius: 15px;
    }
  }

  // 图表
  .echarts-box {
    width: 100%;
    height: 320px;
    margin-top: 20px;
    padding-top: 20px;
    background-color: #fff;
    border-radius: 10px;

    .my-swipe {
      width: 100%;
      height: 100%;

      .van-swipe-item {
        height: 100%;
        background-color: #fff !important;
      }
    }

    // #myEcharts {
    div[id^='myEcharts'] {
      width: 100%;
      height: 100%;
      z-index: 99;
    }
  }
}
</style>
